<script setup lang="ts">
import { ref, isRef, Ref, shallowRef, triggerRef } from "vue";

// let msg = ref("测试1")
let msg: Ref<string> = ref("测试1")
let msg2 = "测试2"
let msgBoo = isRef(msg)
let msg2Boo = isRef(msg2)

const change = () => {
  msg.value = "改变"
  console.log(isRef(msg))
}

interface obj {
  name: string
  age: Number
}

let msg3 = shallowRef({
  name: "yy",
  age: 18
})

const shallowRefClick = () => {
  msg3.value.name = "瑾语"
  // triggerRef(msg3)
  console.log(msg3)
}

</script>

<template>
  <h1>认识ref全家桶</h1>
  <ul>
    <li>ref 把值变成响应式的</li>
    <li>isref 判断值是不是响应式的</li>
    <li>shallowRef 创建一个跟踪自身value变化的ref , 但是不会更新页面</li>
    <li>triggerRef 强制刷新页面dom</li>
    <li>customRef 自定义ref </li>
  </ul>

  <h2>ref 把值变成响应式的</h2>
  {{ msg }}
  <button @click="change">change</button>

  <h2>isref 判断值是不是响应式的</h2>
  isRef(msg) ={{ msgBoo }}
  <br>
  isRef(msg2)={{ msg2Boo }}

  <h2>shallowRef 创建一个跟踪自身value变化的ref , 但是不会更新页面</h2>
  {{ msg3 }}
  <input type="button" @click="shallowRefClick" value="点击">

  <h2>triggerRef 强制刷新页面dom</h2>

  看js shallowRefClick方法

</template>

<style>
</style>
